<template>
	<view class="container">
    <rangeDatePick
        :show="isShow"
        @showchange="showchange"
        :value="value"
        @change="bindChange"
        @cancel="bindCancel"
        themeColor="#4C83D6"
        fields="day"
    ></rangeDatePick>
    <view class="tabbar">
			<view class="item" :class="{active: !tabIndex}" @tap="switchTab(0)">今日订单</view>
			<view class="item" :class="{active: tabIndex}" @tap="switchTab(1)">历史订单</view>
		</view>

    <view style="height: 50px" v-if="tabIndex==1">
      <button style="    padding-top: 70px;
    background-color: lightsalmon;
    border-radius: 25rpx;" @tap="changeDate">选择日期</button>
    </view>
		<view v-if="!tabIndex" class="order-list">


      <view class="no-order-content" v-if="currentOrders.length === 0">
				<image src="https://go.cdn.heytea.com/storage/ad/2020/05/20/0bdb360866d94aa4a4404c0b676a1982.jpg"></image>
				<view class="tips">
					<view>.....</view>
					<view>暂无订单</view>
				</view>
			</view>
			<t-refresh v-else ref="refresh" @refresh="refresh"  @loadMore="loadMore" :loadingType="loadingType">
			    <template  slot="content">
			        <navigator class="order" v-for="(order, index) in currentOrders" :key="index" open-type="navigate">
			        	<view class="header">
						     	<view class="left">
                      <view class="flex-fill font-size-medium" style="color: black;margin-bottom: 0.3rem">{{ order.orderNo }}</view>
                      <view class="flex-fill font-size-medium" style="font-size: 0.7rem;color: #8d9aa8">{{ parseTime(order.gmtCreate) }}</view>
                      <view v-if="order.status == 20
								|| orders.status==50
								|| orders.status == 40
								|| orders.status==30" class="flex-fill " style="color: orange;margin-bottom: 0.3rem;letter-spacing: 4rpx;font-size: 25rpx">取茶码:{{order.specOrder}}</view>
                      <view style="margin-top: 10rpx" >
                        {{statusObj[order.status] }}
                      </view>
                      <view class="flex-fill font-size-medium" style="margin-top: 10rpx">￥{{ (order.actualPrice / 100).toFixed(2) }}</view>
                   </view>
                </view>
			        	<scroll-view scroll-x>
			        		<view class="images" v-for="(item, index) in order.skuList">
			        			<image class="imageStyle" :src="item.img"  :key="index"></image>
								<view class="flex-fill d-flex flex-column" style="margin-top: -0.2rem;margin-left: 0.5rem;">
									<view class="font-size-base mb-10">{{ item.title }}</view>
									<view class="font-size-extra-sm text-color-assist">
										{{ item.specification }}
									</view>
								</view>
			        		</view>

			        	</scroll-view>

			        	<view class="info " style="margin-top: 25rpx">

			        		<view class="left info-spec">
			        			<view>备注：{{ order.mono==null?"":order.mono }}</view>
<!--			        			<view>下单时间：{{ order.gmtCreate }}</view>-->
			        		</view>
			        		<view class="right">

<!--								<view class="left">-->
<!--									<view class="flex-fill font-size-medium" style="color: black;margin-bottom: 0.3rem">￥{{ (order.actualPrice / 100).toFixed(2) }}</view>-->
<!--									<view class="flex-fill font-size-medium" style="font-size: 0.7rem;color: #8d9aa8">共{{ (order.skuList==null||order.skuList.length==0)?1:order.skuList.length}}件</view>-->
<!--								</view>-->
			        		</view>

			        	</view>

			        	<view class="action">
							<button type="default" hover-class="none" @click.stop="payFuncNow(order)">详情</button>
                            <button type="default" hover-class="none" v-if="order.status ===  20" @click.stop="shipOrder(order)">制作完成</button>
							<button type="default" hover-class="none" v-if="order.status ===  60" @click.stop="refoudFunc(order)">确认退款</button>
			        		<!-- <button type="default" hover-class="none">查看评论</button> -->
			        		<!-- <button type="primary" plain hover-class="none">再来一单</button> -->
			        	</view>
			        </navigator>
			    </template>
			</t-refresh>
			
		</view>
		<view v-else  class="order-list">
			<t-refresh ref="refresh2" @refresh="refresh2"  @loadMore="loadMore2" :loadingType="loadingType2">
        <template  slot="content">
          <navigator class="order" v-for="(order, index) in orders" :key="index" open-type="navigate" :url="'/pages/order/detail?id=' + order.id">
            <view class="header">
              <view class="left">
                <view class="flex-fill font-size-medium" style="color: black;margin-bottom: 0.3rem">{{ order.orderNo }}</view>
                <view class="flex-fill font-size-medium" style="font-size: 0.7rem;color: #8d9aa8">{{ parseTime(order.gmtCreate) }}</view>
                <view style="margin-top: 10rpx" >
                  {{statusObj[order.status] }}
                </view>
                <view class="flex-fill font-size-medium" style="margin-top: 10rpx">￥{{ (order.actualPrice / 100).toFixed(2) }}</view>
              </view>
            </view>
            <scroll-view scroll-x>
              <view class="images" v-for="(item, index) in order.skuList">
                <image class="imageStyle" :src="item.img"  :key="index"></image>
                <view class="flex-fill d-flex flex-column" style="margin-top: -0.2rem;margin-left: 0.5rem;">
                  <view class="font-size-base mb-10">{{ item.title }}</view>
                  <view class="font-size-extra-sm text-color-assist">
                    {{ item.specification }}
                  </view>
                </view>
              </view>

            </scroll-view>

            <view class="info " style="margin-top: 25rpx">

              <view class="left info-spec">
                <view>备注：{{ order.mono==null?"":order.mono }}</view>
                <!--			        			<view>下单时间：{{ order.gmtCreate }}</view>-->
              </view>
              <view class="right">

                <!--								<view class="left">-->
                <!--									<view class="flex-fill font-size-medium" style="color: black;margin-bottom: 0.3rem">￥{{ (order.actualPrice / 100).toFixed(2) }}</view>-->
                <!--									<view class="flex-fill font-size-medium" style="font-size: 0.7rem;color: #8d9aa8">共{{ (order.skuList==null||order.skuList.length==0)?1:order.skuList.length}}件</view>-->
                <!--								</view>-->
              </view>

            </view>

            <view class="action">
              <button type="default" hover-class="none" @click.stop="payFuncNow(order)">详情</button>
              <button type="default" hover-class="none" v-if="order.status ===  60" @click.stop="refoudFunc(order)">确认退款</button>
              <!-- <button type="default" hover-class="none">查看评论</button> -->
              <!-- <button type="primary" plain hover-class="none">再来一单</button> -->
            </view>
          </navigator>
        </template>
			</t-refresh>
		</view>
		<!-- <image src="https://go.cdn.heytea.com/storage/ad/2020/05/20/1a389117c2fb44d5bcad4a910a68246c.jpg"></image> -->
		<!-- 登录popup -->
   <!--订单详情-->
    <uni-popup ref="popuporder" type="center">
      <view class="popup-content d-flex flex-column">
        <view class="d-flex justify-content-end" v-if="auto === false">
          <image src="/static/images/common/clousex-big.png" class="close_btn" @tap="close"></image>
        </view>
        <view class="d-flex flex-fill flex-column justify-content-between">
          <view class="d-flex flex-column">
            <view class="font-size-extra-lg font-weight-bold text-color-base mb-30">订单详情</view>
            <view class=" text-color-base">
              <view class="uni-form-item uni-column">
                <view class="title in_label">订单编号:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.orderNo"  placeholder="请输入用户名" />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">用户ID:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.userId"  placeholder="请输入用户名" />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">订单渠道:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.channel"   />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">订单状态:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.status "   />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">支付渠道:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.payChannel | payChannelFilter"   />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">用户留言:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.mono"   />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">客服备注:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.adminMono"   />
              </view>
            </view>
            <view>
            <scroll-view scroll-x>
              <view class="images" v-for="(item, index) in orderInfo.skuList">
                <image class="imageStyle" :src="item.img"  :key="index"></image>
                <view class="flex-fill d-flex flex-column" style="margin-top: -0.2rem;margin-left: 0.5rem;">
                  <view class="font-size-base mb-10">{{ item.title }}</view>
                  <view class="font-size-extra-sm text-color-assist">
                    {{ item.specification }}
                  </view>
                </view>
              </view>
            </scroll-view>
            </view>
          </view>

        </view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
  import DatePicker from '@/components/bz-date-picker/bz-date-picker.vue'
	import tRefresh from "@/components/t-refresh/t-refresh.vue"
  import uniPopup from '@/components/uni-popup/uni-popup.vue'
  import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';

  export default {
	components: {
		tRefresh,
        DatePicker,
        uniPopup,
        rangeDatePick
	},
  filters: {
        orderStatusFilter(status) {
          return statusObj[status]
        },
        payChannelFilter(channel) {
          const str = payChannelMap[channel]
          if (str) {
            return str
          }
          return '未支付'
        }
      },
	data() {
		return {
		    value:['2021-01-01','2021-12-01'],
            isShow:false,
            refundForm:{},
		    orderInfo:{},
		    userName:"",
            userPassword:"",
            moveFlag:false,
			scheduleFlag:[],
			timeSet:[],//时间数组
			tabIndex: 0,
			orderMenuIndex: 0,
			orders: [],
			currentOrders: [],
			storeOrders: [],
			pageSize: 10,
			// 历史订单的分页
			pageNo: 1,
			pageNo2: 1,
			userId: "",
			loadingType: 0,
			loadingType2: 0,
			statusObj: {
				10: "待支付",
				20: "待制作",
				30:　"待收货",
				40: "待评价",
				50: "已完成",
				60: "退款中",
				70: "已退款",
				80: "已取消",
				90: "已取消（系统）"
			}
		}
	},
	deactivated(){
		for(let timerFlag of this.scheduleFlag){
			clearInterval(timerFlag)
		}
	},
	onShow(){
	},
	onHide(){

	},
	async onLoad() {
        this.value = this.startDate()
        console.log("asdfasfsd",this.value)
        this.getList();
	},

	computed: {
		batchInvoiceVisible() {
			return (!this.orderMenuIndex && this.orders.length) || (this.orderMenuIndex && this.storeOrders.length)
		},
		status() {
			if (this.tabIndex) {
				return [40, 50, 70, 80, 90];
			}
			return [10, 20, 30, 60];
		}
	},
	mounted(){
    //this.$refs.popup.open('center')
	},
	watch: {
		currentOrders(newVal, oldVal) {
			console.log(newVal, oldVal);
		}
	},
	methods: {
	    shipOrder(order){
            uni.showLoading({
                title: '加载中...'
            });
            this.$api.ajax({
                url: "/web/admin-order/ship",
                // method: "post",
                header: {
                    "Content-Type": "application/x-www-form-urlencoded",
                  "Authorization": "Bearer "+uni.getStorageSync("jwttoken")
                },

                data: {
                    orderNo: order.orderNo
                },
                success: (res) => {
                    // 成功
                    this.$api.msg("制作中");
                    //模拟数据请求
                    this.pageNo = 1;
                    this.getList(111);
                },
                fail: (res) => {
                    this.$api.msg("开了小差");
                },
                complete: (res) => {
                    uni.hideLoading();
                }
            });
        },
    changeDate (){
      this.isShow = true
    },
    showchange(e){
      console.log(e)
      if(e&&e.length>1){
        let start = new Date(e[0])
        let endDate = new Date(e[1]).getTime()
        endDate.setHours(23)
        endDate.setMinutes(59)
        endDate.setSeconds(59)
        let end = endDate.getTime()
        console.log("start",start)
        console.log("end",end)

      }
    },
    bindChange(e){
      this.isShow = false
      if(e&&e.length>1){
        let start = new Date(e[0]).getTime()
        let endDate = new Date(e[1])
        endDate.setHours(23)
        endDate.setMinutes(59)
        endDate.setSeconds(59)
        let end = endDate.getTime()
        console.log("start",start)
        console.log("end",end)
        this.getList2(111,start,end)

      }
      this.value = e
    },
	  startDate(){
	    let date = new Date()
      let year = date.getFullYear();
	    let mouth = date.getMonth()+1;
	    let day = date.getDay();
	    let a =  year +"-"+mouth+"-01"
	    let ab =  year +"-"+mouth+"-"+date.getDate()
      console.log("aa",a)
      let range = []
      range.push(a)
      range.push(ab)
      return range;
    },
	  login(){
	    if(this.userName == ""||this.userPassword == ""||this.moveFlag==false){
        uni.showToast({
          title: "请输入正确的用户名或密码并托运滑块到正确的位置",
          icon: 'none',
          duration: 1000
        });
        return
      }
      this.$api.ajax({
        url: "/web/user/login",
        method: "post",
        headers : {
          "Content-Type": "application/json;charset=utf-8",
          "X-Requested-With":"XMLHttpRequest"
        },
        data: {
          userCode:this.userName,
          password:this.userPassword
        },
        success: (res) => {
          const { data } = res.data || {};
          const { items } = data || {};
          console.log("abc",res.cookies)
          uni.setStorageSync("token",res.cookies[0])
          uni.hideLoading()
        }
      });
    },
    mverify (e) {
      this.moveFlag = e.msg
      console.log(e.msg)

    },

		isCanPay(order){
			console.log("asdf")
		},
		getCpay(time,status){
			var nowTime = new Date();//获取当前时间
			if(status !=10){
				return '';
			}
			if(time==undefined){
				return "0分钟0秒";
			}
			//创建目标日期
			var endTimeDate = new Date(time);
			if((nowTime.getTime()-endTimeDate.getTime()-5*60)>(30*60)){
				return "";
			}
			var endTime = endTimeDate.setMinutes(endTimeDate.getMinutes())
			var seconds = parseInt((endTime - nowTime.getTime()) / 1000);//两个时间点的时间差(秒)
			var d = parseInt(seconds / 3600 / 24);//得到天数
			var h = parseInt(seconds / 3600 % 24);//小时
			var m = parseInt(seconds / 60 % 60);//分钟
			var s = parseInt(seconds % 60);//秒
			// if(d<0||h<0||m<0||s<0){
			// 	return "0:00";
			// }
			if(d==0&&h==0&&m==0){
				return s + "秒";
			}
			if(d==0&&h==0){
				return m + "分钟" + s + "秒";
			}
			if(d==0){
				return h+"小时"+m + "分钟" + s + "秒";
			}
			 return h+"小时"+m + "分钟" + s + "秒";


		},
		parseTime(timeStr, cFormat) {
			let time = new Date(timeStr);
			if (arguments.length === 0) {
				return null
			}
			const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'

			let date
			if (typeof time === 'object') {
				date = time
			} else {
				if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
					time = parseInt(time)
				}
				if ((typeof time === 'number') && (time.toString().length === 10)) {
					time = time * 1000
				}
				date = new Date(time)
			}
			const formatObj = {
				y: date.getFullYear(),
				m: date.getMonth() + 1,
				d: date.getDate(),
				h: date.getHours(),
				i: date.getMinutes(),
				s: date.getSeconds(),
				a: date.getDay()
			}
			const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
				let value = formatObj[key]
				// Note: getDay() returns 0 on Sunday
				if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
				if (result.length > 0 && value < 10) {
					value = '0' + value
				}
				return value || 0
			})
			return time_str
		},
		reGetList(){
			this.getList(111)
		},
		// 立即支付
		payFuncNow(row) {
			const that = this;
			uni.showLoading({
				title: '加载中...'
			});
			console.log("row",row)
			that.$api.ajax({
				url: "/web/admin-order/detail",
				data: {
					orderNo: row.id
				},
				method: "get",
			header: {
			    "Content-Type": "application/x-www-form-urlencoded",
			  "Authorization": "Bearer "+uni.getStorageSync("jwttoken")
			},
				success:(res) => {
					const { data } = res.data || {};
          console.log(data)
		  uni.hideLoading();
          this.orderInfo = data
		  this.orderInfo.status = this.statusObj[this.orderInfo.status]
          this.$refs.popuporder.open('center')

				}
			});
		},
		// 立即支付
		payFunc(row) {
			const that = this;
			uni.showLoading({
			    title: '加载中...'
			});
			console.log("row",row)
			that.$api.ajax({
				url: "/web/app-order/wx-prepay",
				data: {
					orderNo: "",
					parentOrderNo: row.id,
					ip: "192.168.30.111",
					zzjgId: 2,
					userId: uni.getStorageSync("userId")
				},
				method: "post",
				header: {
					"Content-Type": "application/x-www-form-urlencoded"
				},
				success(res) {
					const { data } = res.data || {};

					const { appId, nonceStr, packageValue, paySign, signType, timeStamp } = data || {};
					uni.hideLoading();
					wx.requestPayment(
					{
					"timeStamp": timeStamp,
					"nonceStr": nonceStr,
					"package": packageValue,
					"signType": signType,
					"paySign": paySign,
					'success':function(res){
						that.$api.msg("支付成功");
						uni.reLaunch({
							url: '/pages/order/order'
						})
					},
					'fail':function(res){
						that.$api.msg("支付失败");
						console.log(res, 198);
					},
					'complete':function(res){
						console.log(res, 201);
					}
					})
				}
			});
		},
		// 发起退款
		refoudFunc(row) {
          const obj = {
            orderNo: row.orderNo,
            sum: row.payPrice / 100.0,
            type: 0
          }
          this.refundForm = Object.assign({}, obj)
                uni.showModal({
                    title: '提示',
                    content: '您确定要发起退款？',
                    success:  (res) => {
                        if (res.confirm) {
                            uni.showLoading({
                                title: '加载中...'
                            });
                            this.$api.ajax({
                                url: "/web/admin-order/refund",
                                // method: "post",
                                header: {
                                  "Content-Type": "application/x-www-form-urlencoded",
								  "Authorization": "Bearer "+uni.getStorageSync("jwttoken")
                                },
                                data: {
                                    orderNo: obj.orderNo,
                                          sum: obj.sum*100,
                                          type: 1
                                },
                                success: (res) => {
                                    // 成功
                                    this.$api.msg("退款处理中");
                                    uni.reLaunch({
                                        url: '/pages/my/order/order'
                                    })
                                },
                                fail: (res) => {
                                    this.$api.msg("发起退款失败");
                                },
                                complete: (res) => {
                                    uni.hideLoading();
                                }
                            });
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
		},
		// 取消订单
		cancelFunc(row) {
			// /web/app-order/cancel
			let that = this;
			uni.showModal({
			    title: '提示',
			    content: '您确定要取消该订单？',
			    success: function (res) {
			        if (res.confirm) {
						uni.showLoading({
						    title: '取消中...'
						});
			            that.$api.ajax({
			            	url: "/web/app-order/cancel",
			            	// method: "post",
			            	data: {
			            		orderNo: row.orderNo,
			            		userId: uni.getStorageSync("userId")
			            	},
			            	success: (res) => {
			            		// 成功
								that.$api.msg("订单取消成功");
								uni.reLaunch({
									url: '/pages/order/order'
								})
			            	},
							fail: (res) => {
								that.$api.msg("订单取消失败");
							},
							complete: (res) => {
								uni.hideLoading();
							}
			            });
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		// 加载更多
        async loadMore() {
              //loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
            if(this.loadingType==0){
                this.loadingType=2
                //模拟数据请求
                this.pageNo++;
                this.getList();
            }
        },
		            //刷新
        async refresh(e){
                //模拟数据请求
                this.pageNo = 1;
                this.getList(111);
            },
		getList(flag,startTime,endTime) {
              let date = new Date();
              if(!startTime){
                date.setHours(0);
                date.setMinutes(0);
                date.setSeconds(0);
                startTime =date.getTime();
              }
              if(!endTime){
                date = new Date()
                endTime = date.getTime()
              }
                    // POST /web/app-order/get-order-page
                    const { pageNo, pageSize, userId, status } = this;

                    this.$api.ajax({
                        url: "/web/admin-order/list",
                        header:{
                          "X-Requested-With":"XMLHttpRequest",
                            "Authorization": "Bearer "+uni.getStorageSync("jwttoken")
                        },
                        // method: "post",
                        data: {
                            page:pageNo,
                            limit:pageSize,
                            start:startTime,
                            end:endTime
                        },
                        success: (res) => {
                            const { data } = res.data || {};
                            const { items } = data || {};
                            console.log("abc",res)
                            if(data == null && res.data.status == 403
                            ||res.data.code == 401) {
                                uni.navigateTo({
                                    url: '/pages/login/login'
                                })
                                return
                            }
                            console.log(this.items)
                            //this.timeSet = [];//置空时间集合
                            //开始创建定时器
                            let originLength = this.timeSet.length;
                            for(let [index,order] of items.entries()){
                                let startTime = order.gmtCreate
                                let date = new Date(startTime)
                                let fDate = date.setMinutes(date.getMinutes()+5);
                                this.$set(this.timeSet,originLength+index,fDate)
                            }



                            if (flag === 111) {
                                console.log("asdf")
                                this.currentOrders = [];
                                this.currentOrders = [...this.currentOrders, ...(items || [])];
                                console.log("curentOrders",this.currentOrders)
                                this.$nextTick(() => {
                                    try{
                                        this.$refs.refresh.endRefresh()
                                    }catch(e){
                                        //TODO handle the exception
                                    }

                                })

                                this.loadingType=0
                                uni.hideLoading()
                                return;
                            }
                            this.currentOrders = [...this.currentOrders, ...(items || [])];
                            if ((items || []).length < pageSize) {
                                this.loadingType=1;
                            } else {
                                this.loadingType = 0;
                            }
                            uni.hideLoading()
                        }
                    });
		},
		async loadMore2() {
			console.log(350)
            //loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
            if(this.loadingType2==0){
                this.loadingType2=2
                //模拟数据请求
                this.pageNo2++;
                this.getList2();
            }
        },
		            //刷新
        async refresh2(e){
            //模拟数据请求
            this.orders = [];
            this.pageNo2 = 1;
            this.getList2(111);
        },
		getList2(flag,startTime,endTime) {
			// POST /web/app-order/get-order-page
			  const { pageNo2, pageSize, userId, status } = this;
			  let date = new Date()
              date.setMonth(1)
              date.setDate(1)
              date.setHours(0)
              date.setMinutes(0)
              date.setSeconds(0)
              if(!startTime){
                startTime = date.getTime()
              }
              if(!endTime){
                date = new Date();
                date.setDate(date.getDate()-1)
                date.setHours(23)
                date.setMinutes(59)
                date.setSeconds(59)
                endTime = date.getTime()
              }
                    this.$api.ajax({
                        url: "/web/admin-order/list",
                        header:{
                          "X-Requested-With":"XMLHttpRequest",
                            "Authorization": "Bearer "+uni.getStorageSync("jwttoken")
                        },
                        data: {
                            page: pageNo2,
                            limit:pageSize,
                            userId,
                            start:startTime,
                            end:endTime

                        },
                        success: (res) => {
                            const { data } = res.data || {};
                            const { items } = data || {};
                            if (flag === 111) {
                                this.orders = [];
                                this.orders = [...this.orders, ...(items || [])];
                                this.$nextTick(() => {
                                    try{
                                        this.$refs.refresh2.endRefresh()
                                    }catch(e){
                                        //TODO handle the exception
                                    }
                                })

                                this.loadingType2=0
                                return;
                            }
                            this.orders = [...this.orders, ...(items || [])];
                            if ((items || []).length < pageSize) {
                                this.loadingType2=1;
                            } else {
                                this.loadingType2 = 0;
                            }
                        }
                    });
		},
		// /web/coldOrder/getOrderList
		goOrder() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		async switchTab(index) {
			if(this.tabIndex === index) return
			this.tabIndex = index
			this.orders = [];
			this.currentOrders = [];
			this.pageNo = 1;
			this.pageNo2 = 1;
			this.loadingType = 0;
			this.loadingType2 = 0;
			if(this.tabIndex) {
				//this.getList2();
			} else {
				this.getList()
			}
		},
		handleSwiperItemChange() {	//禁止手动滑动
			return true
		},
		async switchMenuTab(index) {
			if(this.orderMenuIndex === index) return
			this.orderMenuIndex = index
			await this.getOrders()
		},
		async getOrders() {
			// 获取历史订单
			this.$api.ajax({
				url: "/web/coldOrder/getOrderList",
				data: {
					openId: uni.getStorageSync("openId")
				},
				method: "get",
				success: (res) => {
					// console.log(res);
					this.orders = res.data.data.list || [];
					// 订单的id
					// data
				}
			});
			// if(!this.orderMenuIndex) {
			// 	this.orders = await this.$api('orders')
			// } else {
			// 	this.storeOrders = await this.$api('storeOrders')
			// }
		},
		formatTime(timeStr, option) {
			let time = new Date(timeStr)
			if (('' + time).length === 10) {
				time = parseInt(time) * 1000
			} else {
				// time = +time
			}
			// console.log(time, new Date(time))
			const d = new Date(time)
			const now = Date.now()
			const diff = (now - d) / 1000

			if (diff < 30) {
				return '刚刚'
			} else if (diff < 3600) {
				// less 1 hour
				return Math.ceil(diff / 60) + '分钟前'
			} else if (diff < 3600 * 24) {
				return Math.ceil(diff / 3600) + '小时前'
			} else if (diff < 3600 * 24 * 2) {
				return '1天前'
			}
			if (option) {
				return this.parseTime(time)
			} else {
				return (
						d.getMonth() +
						1 +
						'月' +
						d.getDate() +
						'日' +
						d.getHours() +
						'时' +
						d.getMinutes() +
						'分'
				)
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f6f6;
}
.popup-content {
  background-color: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  height: 50vh;
  padding: 50rpx 40rpx;
}
.in_label{
  display: block;
  float: left;
  width: 30%;
}
.in_text{
  display: block;
  float: left;
  width: 60%;
  margin-top: 4rpx;
}

.close_btn {
  width: 40rpx;
  height: 40rpx;
}
.navbar {
	height: calc(44px + var(--status-bar-height));
	/* #ifdef H5 */
	height: 44px;
	/* #endif */
	display: flex;
	background-color: #FFFFFF;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999999;
}
.noshow{
	display: none;
}
.talk-btn {
	height: 32px;
	margin-left: 10px;
	margin-top: 26px;
	/* #ifdef H5 */
	margin-top: 6px;
	/* #endif */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: $font-size-sm !important;
	padding: 0 20rpx;
	border-radius: 50rem !important;
	
	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: $spacing-row-sm;
	}
}
.imageStyle{
	width: 40px!important;
	height: 40px!important;
}
.tabbar {
	height: 100rpx;
	background-color: $bg-color-white;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: fixed;
	//top: calc(44px + var(--status-bar-height));
	left: 0;
	right: 0;
	z-index: 999999;
	.item {
		height: 100%;
		font-size: $font-size-lg;
		color: $text-color-assist;
		font-weight: 400 !important;
		display: flex;
		align-items: center;
		
		&.active {
			color: $text-color-base;
			border-bottom: 4rpx solid $text-color-base;
		}
	}
}

.swiper {
	width: 100%;
	height: calc(100vh - 44px - var(--status-bar-height) - 110rpx);
	/* #ifdef H5 */
	height: calc(100vh - 44px - var(--status-bar-height) - 110rpx - 100rpx);
	/* #endif */
}

.no-order-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 50rpx;
	}

	.tips {
		color: $text-color-assist;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1.2rem !important;
		margin-bottom: 70rpx;
	}

	button {
		width: 50%;
	}
}

.history-order {
	width: 100%;
	height: 100%;
	position: relative;
	
	.menu {
		padding: 18rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: $font-size-base;
		color: $text-color-grey;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		
		.item {
			padding: 14rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			
			&.active {
				color: $color-primary;
				background-color: $bg-color-white;
			}
		}
	}
	
	.history-order-swiper {
		width: 100%;
		height: 100%;
	}
}

.store-order-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: $font-size-base;
	color: $text-color-assist;
	line-height: 1.3rem !important;
	
	image {
		width: 400rpx;
		height: 333rpx;
		margin-bottom: 40rpx;
	}
}

.orders-scroll {
	width: 100%;
	height: 100%;
	padding-top: 104rpx;
}
.images {
  display: inline-block;
  padding: 30rpx 0;
  image {
    flex-shrink: 0;
    width: 150rpx;
    height: 112.5rpx;
  }
}
.order-list {
	display: flex;
	width: 100%;
	flex-direction: column;
	padding-top: calc(100rpx);
	.order {
		background-color: $bg-color-white;
		padding: 30rpx 40rpx;
		margin-bottom: 18rpx;
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.status {
				font-size: $font-size-base;
				color: $text-color-grey;
				display: flex;
				align-items: center;
				margin-top: -1.7rem;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: $spacing-row-sm;
				}
			}
		}
		
		.images {
			display: flex;
			padding: 30rpx 0;
			image {
				flex-shrink: 0;
				width: 150rpx;
				height: 112.5rpx;
			}
		}
		.info-spec{
			margin-top: -60px;
			margin-bottom: -5.1rem;
		}
		.info {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
			margin-top: -0.5rem;
			
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: $font-size-base;
				color: $text-color-grey;
			}
			
			.right {
				font-size: $font-size-lg;
				color: $text-color-base;
			}
		}
		
		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			
			button {
				margin-left: 30rpx;
				font-size: $font-size-sm;
				color: orange !important;
				border: 1px solid orange!important;
				border-radius: 0.5rem;
			}
		}
	}
}
</style>
